<template>
  <div class="transaction_flow_page boxSize">
    <div class="search-content">
      <el-form :model="formInline" ref="formInline" class="balanceInquiry-content" :rules="rules" label-width="80px">
        <el-col :span="6">
          <el-form-item label="账号" prop="acNo">
            <el-select v-model="formInline.acNo" clearable placeholder="请选择账号">
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="日期">
            <el-col :span="11">
              <el-form-item prop="startDate">
                <el-date-picker type="date" placeholder="选开始择日期"
                                value-format="yyyyMMdd"
                                v-model="formInline.startDate"></el-date-picker>
              </el-form-item>
            </el-col>
            <el-col class="line" :span="2">-</el-col>
            <el-col :span="11">
              <el-form-item prop="endDate">
                <el-date-picker type="date" placeholder="选择结束时间"
                                value-format="yyyyMMdd"
                                v-model="formInline.endDate"></el-date-picker>
              </el-form-item>

            </el-col>
          </el-form-item>
        </el-col>
        <div class="common serach-btn">
          <el-button type="primary" @click="search">查询</el-button>
        </div>
      </el-form>
    </div>
    <div class="">
      <el-table
        :data="list"
        style="width: 100%">
        <el-table-column
          prop="txcdnm"
          label="交易名称"
          width="110">
        </el-table-column>
        <el-table-column
          prop="balance"
          label="余额"
          width="115">
        </el-table-column>
        <el-table-column
          prop="txmmo"
          label="业务摘要" width="80">
        </el-table-column>
        <el-table-column
          prop="txamt"
          label="交易金额">
        </el-table-column>
        <el-table-column
          prop="txtm"
          label="交易时间">
          <template slot-scope="scope">
            {{formatDay(scope.row.txdt)}} {{formatTime(scope.row.txtm)}}
          </template>
        </el-table-column>
        <el-table-column
          prop="drcrflg"
          label="借贷方向">
          <template slot-scope="scope" width="80">
            {{scope.row.drcrflg === 'D' ? '借' : '贷'}}
          </template>
        </el-table-column>
        <el-table-column
          prop="relac"
          label="对手账号">
        </el-table-column>
        <el-table-column
          prop="relciname"
          label="对手账户名称">
        </el-table-column>
      </el-table>
      <div class="pagination">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :page-sizes="[10, 20, 50]"
          :page-size="10"
          background
          layout="total, sizes, prev, pager, next, jumper"
          :total="list.length">
        </el-pagination>
      </div>
    </div>
  </div>
</template>

<script>
import { queryAccountTrans } from '@/libs/api';
import Constants from '@/libs/constants';

export default {
  data() {
    return {
      currency: Constants.currencyMap,
      formInline: {
        acNo: '',
        startDate: '',
        endDate: ''
      },
      options: [
        { value: '0433410000111578', label: '0433410000111578' },
        { value: '0433410000111602', label: '0433410000111602' },
        { value: '0433410000111592', label: '0433410000111592' },
        { value: '0433410000111530', label: '0433410000111530' },
        { value: '0433410000111561', label: '0433410000111561' },
        { value: '0433410000111554', label: '0433410000111554' }
      ],
      rules: {
        acNo: [{ required: true, message: '请选择账号', trigger: 'change' }],
        startDate: [{ required: true, message: '请选择时间', trigger: 'blur' }],
        endDate: [{ required: true, message: '请选择时间', trigger: 'blur' }]
      },
      pageIndex: 1,
      pageNum: 10,
      list: []
    }
  },
  methods: {
    handleSizeChange(val) {
      this.pageNum = val;
      this.pageIndex = 1;
      if (this.formInline.acNo) {
        this.search();
      }
    },
    handleCurrentChange(val) {
      console.log(val);
    },
    formatDay(str) {
      if(!str) {
        return ''
      }
      let year = str.substr(0, 4);
      let month = str.substr(4, 2);
      let day = str.substr(6, 2);
      return `${year}/${month}/${day}`;
    },
    formatTime(str) {
      if(!str) {
        return ''
      }
      let h = str.substr(0, 2);
      let m = str.substr(2, 2);
      let s = str.substr(4, 2);
      return `${h}:${m}:${s}`;
    },
    search() {
      this.$refs.formInline.validate((valid) => {
        if (valid) {
          let params = {
            acNo: this.formInline.acNo,
            startDate: this.formInline.startDate,
            endDate: this.formInline.endDate,
            hostNo: '043101008690',
            pageIndex: this.pageIndex,
            pageNum: this.pageNum,
            ccyCd: 156
          }
          queryAccountTrans(params).then((res) => {
            console.log(res);
            this.list = res.accountransnews;
          })
        } else {
          console.log(2);
        }
      });

    }
  }
}
</script>

<style scoped lang="less">
  .transaction_flow_page{
  }
</style>
